<template>
	<view class="cont">
		<view class="cont-body">
			<view class="from">
				<view class="from-list" v-for="(item,index) in users" :key="index">
					<view class="from-list-cell">
						<view class="from-lable">
							<text>姓名：</text>
						</view>
						<input type="text" v-model="item.name" placeholder="最多40个字符" />
						<view class="from-icon">
							<uni-icons color="#CCCCCC" class="icon-input-compose" type="compose" size="18" />
						</view>
					</view>
					<view class="from-list-cell">
						<view class="from-lable">
							<text>手机号：</text>
						</view>
						<input type="number" v-model="item.phone" placeholder="11位数字或“+”号开头" />
						<view class="from-icon">
							<uni-icons color="#CCCCCC" class="icon-input-compose" type="compose" size="18" />
						</view>
					</view>
				</view>
			</view>
			
			<view class="invite" @click="addInput()">
				<uni-icons color="#15B881" class="icon-filled" type="plus-filled" size="22" />
				<text>添加新成员</text>
			</view>
			
			<view class="cont-Tips">
				<text>默认显示一条消息，点击添加新成员后增加</text>
			</view>
			
		</view>
		
		<view class="cont-tabBar">
			<view class="cont-tabBar-row">
				<view class="cont-tabBar-item cont-tabBar-confirm">
					<button type="default" @click="onConfirmAdd()">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import API from '../../common/api.js';
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	
	export default {
		components: {
			uniIcons
		},
		data: function () {
	        return {
				navTitle: "宁南县软云软件开发有限公司",
				userid: 1,
				deptid: 1,
				users:  []
	        }
	    },
		onLoad:function(){
			this.userid = uni.getStorageSync("userid");
			this.deptid = uni.getStorageSync("deptid");
			var users = [{deptid: this.deptid, name: "", phone:""}]
			this.users = users;
		},
		methods:{
			// 确定添加
			onConfirmAdd(){
				var that = this;
				console.log(that.users)
				uni.request({
					url:API.addUser,
					data:{
						userid: that.userid,
						users: that.users
					},
					method:"POST",
					header:API.get_head(),
					success: (res) => {
						console.log("res==>", res);
						that.gotoBack();
						
						uni.showToast({
							title:res.data.message,
							icon:"none"
						});
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				});
			},
			addInput(){
				var that = this;
				
				var user = {
					deptid: that.deptid,
					name: "",
					phone: ""
				}
				
				that.users.push(user);
			},
			gotoBack(){
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style>
	@import "../../common/uni.css";
	
	page{
		height: 100%;
		background-color: #e5e5e5;
	}
	.cont-body{
		padding-bottom: 120upx;
	}
	
	
	.from{
		/* padding: 0 20upx; */
	}
	.from-list{
		padding-left: 30upx;
		position: relative;
		background-color: #FFFFFF;
	}
	.from-list:after{
		content: "";
		display: block;
		width: 100%;
		height: 2upx;
		background-color: #EFEFEF;
		position: absolute;
		left: 0;
		top: 0;
	}
	.from-list:nth-child(n+2){
		margin-top: 30upx;
	}
	.from-list-cell{
		height: 100upx;
		line-height: 100upx;
		padding-right: 30upx;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #070B0E;
	}
	.from-list-cell:after{
		content: "";
		display: block;
		width: 100%;
		height: 2upx;
		background-color: #EFEFEF;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.from-list .from-list-cell:last-child:after{
		height: 0;
	}
	
	.from-lable{
		width: 130upx;
		line-height: 100upx;
	}
	.from-list-cell input{
		height: 100%;
		line-height: 100upx;
		flex: 1;
	}
	.from-list-cell input::-webkit-input-placeholder {  	/* WebKit browsers */
	    color: #CCCCCC;
	}
	.from-list-cell .from-icon{
		width: 40upx;
		line-height: 100upx;
		text-align: right;
	}
	
	
	.invite{
		margin: 30upx 0;
		background-color: #FFFFFF;
		height: 80upx;
		line-height: 80upx;
		color: #303030;
	}
	.invite .icon-filled{
		margin: 0 30upx;
	}
	
	.cont-Tips{
		margin-top: 60upx;
		padding: 0 30upx 30upx;
		color: #FE2C2C;
	}
	
	
	.cont-tabBar{
		width: 100vw;
		height: 120upx;
		box-sizing: border-box;
		padding: 20upx 30upx;
		border-top: 1px solid #ECECEC;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10000;
		background-color: #FFFFFF;
	}
	.cont-tabBar-row{
		height: 80upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.cont-tabBar-item{
		flex: 1;
		height: 80upx;
	}
	.cont-tabBar-item button{
		height: 100%;
		border-radius: 13upx;
		background-color: #B1D4FC;
		border: 1px solid #ADC2D3;
		color: #D4F0FF;
	}
	.cont-tabBar-item button:active{
		background-color: #B1D4FC;
		opacity: 0.6;
	}
	
	
	
	
</style>
